<template>
<div class="newslist-contain"> 
  <!-- 新闻资讯列表页面 用MUI的media-list.html -->
  <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
      <router-link :to="'/home/newsinfo/'+item.id+'/'+item.add_time+'/'+item.click+'/'+item.title">
        <img class="mui-media-object mui-pull-left" :src="item.img_url">
        <div class="mui-media-body">
          <h1 class="newslist-title">{{item.title}}</h1>
          <p class="newslist-body">
            <!-- 调用全局过滤器格式化时间，按自己的参数格式 -->
            <span class="newslist-datatime">发表时间：{{item.add_time | dateFormat('YYYY-MM-DD')}}</span>
            <span class="newslist-count">点击次数：{{item.click}}次</span>
          </p>
        </div>
      </router-link>
    </li>
  </ul>
</div>
</template>

<script>
import {Toast} from 'mint-ui'

export default {
  data(){
    return {
      //和轮播图做法一样，从缓存中取
      newslist:JSON.parse(window.localStorage.getItem("newslist")||'[]'),//新闻资讯列表数组
    }
  },
  created(){
    this.getNewsList()
  },
  methods:{
    getNewsList(){
      this.$axios.get("/getnewslist").then(res=>{
        // console.log(res.data)
        if(res.data.status===0){
          // 和轮播图一样放入缓存
          window.localStorage.setItem('newslist',JSON.stringify(res.data.message))
        }else{
          Toast('新闻列表未更新。。。')
        }
      }).catch(err=>Toast('无法连接服务器'+err))
    }
  }
}
</script>

<style lang='scss' scoped>
.newslist-contain{
  .newslist-title{
    font-size: 14px;
  }
  .newslist-body{
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    color: blue;
  }
}

</style>